<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>联系人数据分析报表</title>
    <style>
        body {
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          background-color: #f5f9f1;
          margin: 0;
          padding: 0;
        }

        .wrapper-content {
          padding: 20px 30px;
        }
        
        .dashboard-header {
          text-align: center;
          margin-bottom: 30px;
        }
        
        .dashboard-header h1 {
          color: #2d5d2c;
          font-size: 28px;
          margin-bottom: 10px;
        }
        
        .dashboard-header p {
          color: #3a603a;
          font-size: 16px;
        }

        .ibox {
          background-color: #ffffff;
          border-radius: 15px;
          box-shadow: 0 8px 20px rgba(0, 100, 0, 0.08);
          margin-bottom: 30px;
        }

        .ibox-title {
          background-color: transparent;
          border-bottom: 1px solid #e8f3ec;
          padding: 15px 20px;
        }

        .ibox-title h5 {
          color: #2d5d2c;
          font-size: 18px;
          letter-spacing: 0.5px;
          margin: 0;
        }

        .ibox-content {
          padding: 20px;
        }

        .echarts {
          width: 100%;
          height: 350px;
        }
        
        .btn-group {
          text-align: center;
          margin: 20px 0;
        }
        
        .btn {
          display: inline-block;
          background-color: #42b983;
          color: white;
          border: none;
          padding: 8px 16px;
          margin: 0 5px;
          border-radius: 4px;
          cursor: pointer;
          transition: background-color 0.3s;
        }
        
        .btn:hover {
          background-color: #3a9d6b;
        }
    </style>
</head>
<body>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="dashboard-header">
        <h1>📊 联系人数据分析报表</h1>
        <p>全面展示联系人分布和趋势的可视化分析</p>
    </div>
    
    <div class="row">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>🌱 联系人月度趋势分析</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="monthly-chart"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>🌿 联系人分类柱状分析</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="bar-chart"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>🌳 联系人分类饼图分析</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="pie-chart"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>🌴 联系人数据统计概览</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="stats-chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
    /*<![CDATA[*/
    $(function () {
        // 清新自然主题配色
        const naturalColors = ['#88c9a1', '#6dd47e', '#42b983', '#3a9d6b', '#2f805a', '#a8e0a2', '#4caf50', '#2e7d32'];
        
        // 获取后端传递的数据
        const dataCountByCategory = /*[[${dataCountByCategory}]]*/ [];
        
        // 提取分类数据
        const categories = [];
        const pieData = [];
        
        for (let i = 0; i < dataCountByCategory.length; i++) {
            const item = dataCountByCategory[i];
            const key = Object.keys(item)[0];
            const name = item[Object.keys(item)[1]];
            categories.push(name);
            pieData.push({
                name: name,
                value: item[key]
            });
        }
        
        // 初始化饼图
        initPieChart(categories, pieData);
        
        // 初始化柱状图
        initBarChart(categories, pieData);
        
        // 获取月度数据
        $.ajax({
            url: ctx + "contact/report/monthlyData",
            type: "GET",
            dataType: "json",
            success: function(response) {
                const months = response.months;
                const counts = response.counts;
                initMonthlyChart(months, counts);
            },
            error: function() {
                // 使用模拟数据
                const months = ['2025-01', '2025-02', '2025-03', '2025-04', '2025-05', '2025-06'];
                const counts = [10, 15, 12, 18, 22, 16];
                initMonthlyChart(months, counts);
            }
        });
        
        // 初始化统计概览
        initStatsChart(categories, pieData);
    });
    
    // 饼图初始化
    function initPieChart(categories, pieData) {
        const pieChart = echarts.init(document.getElementById("pie-chart"));
        const pieOption = {
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(255,255,255,0.95)',
                borderColor: '#d6ead6',
                textStyle: { color: '#3a603a' },
                formatter: function(params) {
                    return `<div style="padding:10px;border-radius:5px;">
                            <div style="font-weight:bold;margin-bottom:5px;">${params.name}</div>
                            <div>数量：<span style="color:#42b983">${params.value}</span></div>
                            <div>占比：<span style="color:#42b983">${params.percent}%</span></div>
                            </div>`;
                }
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top: 'center',
                data: categories,
                textStyle: { color: '#3a603a' }
            },
            series: [{
                name: '联系人分类',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['65%', '50%'],
                data: pieData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(66, 185, 131, 0.5)'
                    }
                },
                label: {
                    show: true,
                    formatter: '{b}: {c} ({d}%)'
                }
            }],
            color: ['#88c9a1', '#6dd47e', '#42b983', '#3a9d6b', '#2f805a', '#a8e0a2']
        };
        pieChart.setOption(pieOption);
        $(window).resize(function() {
            pieChart.resize();
        });
    }
    
    // 柱状图初始化
    function initBarChart(categories, pieData) {
        const barChart = echarts.init(document.getElementById("bar-chart"));
        const barValues = pieData.map(item => item.value);
        const barOption = {
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(255,255,255,0.95)',
                borderColor: '#d6ead6',
                textStyle: { color: '#3a603a' }
            },
            xAxis: {
                type: 'category',
                data: categories,
                axisLabel: {
                    rotate: 30,
                    color: '#3a603a'
                },
                axisLine: {
                    lineStyle: { color: '#d6ead6' }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: { color: '#3a603a' },
                splitLine: {
                    lineStyle: {
                        color: '#e8f3ec',
                        type: 'dashed'
                    }
                }
            },
            grid: {
                left: '10%',
                right: '5%',
                bottom: '20%'
            },
            series: [{
                name: '联系人数量',
                type: 'bar',
                data: barValues,
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0, y: 0, x2: 0, y2: 1,
                        colorStops: [
                            {offset: 0, color: '#a8e0a2'},
                            {offset: 1, color: '#88c9a1'}
                        ]
                    },
                    borderRadius: 5
                },
                label: {
                    show: true,
                    position: 'top',
                    color: '#42b983'
                }
            }]
        };
        barChart.setOption(barOption);
        $(window).resize(function() {
            barChart.resize();
        });
    }
    
    // 月度趋势图初始化
    function initMonthlyChart(months, counts) {
        const monthlyChart = echarts.init(document.getElementById("monthly-chart"));
        const monthlyOption = {
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(255,255,255,0.95)',
                borderColor: '#d6ead6',
                textStyle: { color: '#3a603a' }
            },
            xAxis: {
                type: 'category',
                data: months,
                axisLabel: {
                    rotate: 30,
                    color: '#3a603a'
                },
                axisLine: {
                    lineStyle: { color: '#d6ead6' }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: { color: '#3a603a' },
                splitLine: {
                    lineStyle: {
                        color: '#e8f3ec',
                        type: 'dashed'
                    }
                }
            },
            grid: {
                left: '10%',
                right: '5%',
                bottom: '20%'
            },
            series: [{
                name: '新增联系人',
                type: 'line',
                data: counts,
                smooth: true,
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: { color: '#42b983' },
                lineStyle: {
                    color: '#42b983',
                    width: 3
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0, y: 0, x2: 0, y2: 1,
                        colorStops: [
                            {offset: 0, color: 'rgba(66, 185, 131, 0.3)'},
                            {offset: 1, color: 'rgba(66, 185, 131, 0)'}
                        ]
                    }
                },
                label: {
                    show: true,
                    position: 'top',
                    color: '#42b983'
                }
            }]
        };
        monthlyChart.setOption(monthlyOption);
        $(window).resize(function() {
            monthlyChart.resize();
        });
    }
    
    // 统计概览图初始化
    function initStatsChart(categories, pieData) {
        const statsChart = echarts.init(document.getElementById("stats-chart"));
        
        // 计算总数和平均值
        let total = 0;
        let max = 0;
        let maxCategory = '';
        
        pieData.forEach(item => {
            total += item.value;
            if (item.value > max) {
                max = item.value;
                maxCategory = item.name;
            }
        });
        
        const avg = Math.round(total / pieData.length);
        
        const statsOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: { show: false },
            yAxis: {
                type: 'category',
                data: ['总数', '平均', '最多']
            },
            series: [
                {
                    name: '数量',
                    type: 'bar',
                    data: [
                        {value: total, itemStyle: {color: '#88c9a1'}},
                        {value: avg, itemStyle: {color: '#42b983'}},
                        {value: max, itemStyle: {color: '#2f805a'}}
                    ],
                    label: {
                        show: true,
                        position: 'right',
                        formatter: function(params) {
                            if (params.dataIndex === 2) {
                                return params.value + ' (' + maxCategory + ')';
                            }
                            return params.value;
                        }
                    }
                }
            ]
        };
        
        statsChart.setOption(statsOption);
        $(window).resize(function() {
            statsChart.resize();
        });
    }
    /*]]>*/
</script>
</body>
</html>